<template>
    <div>
        <!--搜索-->
        <div id="searchData">
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="searchForm.name" placeholder="——请输入商品类型——"
                              class="center-text"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="search" icon="el-icon-search">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addProductType" icon="el-icon-circle-plus-outline">添加</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="refresh" icon="el-icon-refresh">刷新</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- table -->
        <el-table
                :data="tableData"
                style="width: 100%"
        >
            <!-- 序号 -->
            <el-table-column
                    type="index"
                    :index="indexMethod"
            >
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="商品类型"
                    width="120"
            >
            </el-table-column>
            <el-table-column
                    prop="description"
                    label="商品类型描述"
                    width="200"
            ></el-table-column>
<!--            <el-table-column-->
<!--                    prop="isvalid"-->
<!--                    label="是否有效"-->
<!--                    width="120"-->
<!--            >-->
<!--                <template slot-scope="scope">-->
<!--                    <el-switch-->
<!--                            v-model="scope.row.isvalid"-->
<!--                            class="isShow"-->
<!--                            :active-value="'1'"-->
<!--                            :inactive-value="'0'"-->
<!--                            active-color="#13ce66"-->
<!--                            inactive-color="#ff4949"-->
<!--                            @change="changeIsvalid(scope.row)"-->
<!--                    >-->
<!--                    </el-switch>-->
<!--                </template>-->
<!--            </el-table-column>-->

            <el-table-column
                    prop="isedit"
                    label="是否允许修改"
                    width="120"
            >
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.isedit"
                            class="isShow"
                            :active-value="'1'"
                            :inactive-value="'0'"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            @change="changeIsedit(scope.row)"
                    >
                    </el-switch>
                </template>
            </el-table-column>

            <el-table-column
                    prop="userName"
                    label="创建人"
                    width="120"
                    :formatter="createFormatter"
            >
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建时间"
                    width="160"
            >
            </el-table-column>
            <el-table-column
                    prop="userName"
                    label="更新人"
                    width="120"
                    :formatter="updateFormatter"
            >
            </el-table-column>
            <el-table-column
                    prop="updateTime"
                    label="更新时间"
                    width="160"
            >
            </el-table-column>

            <el-table-column label="操作" width="200" fixed="right">
                <template slot-scope="scope">
                    <!--                //开关组件更新数据库状态 是否允许被修改-->
                    <el-button size="small" type="primary" icon="el-icon-edit-outline"
                               :disabled="scope.row.isedit!=='1'" @click="updataProductType(scope.row)">编辑
                        <!--                   <el-button size="small" type="primary" icon="el-icon-edit-outline" :disabled="scope.row.isedit==='1'?false:true"  @click="updataProductType(scope.row)">编辑-->
                    </el-button>
                    <el-button size="small" type="danger" @click="deleteproductType(scope.row.commentId)"
                               icon="el-icon-remove-outline">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页功能-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="searchForm.currentPage"
                :page-sizes="[1,2,5,10]"
                :page-size="searchForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>


        <!--添加或者更新的form表单-->
        <el-dialog
                :title="title"
                :visible.sync="dialogFormVisible"
        >
            <el-form
                    ref="addEditform"
                    :rules="rules"
                    :model="addEditform"

            >
                <el-form-item
                        prop="name"
                        label="商品类型"
                        :label-width="formLabelWidth"
                >
                    <el-input
                            v-model="addEditform.name"
                            autocomplete="off"
                            placeholder="商品类型"
                    ></el-input>
                </el-form-item>
                <el-form-item
                        label="商品类型描述"
                        :label-width="formLabelWidth"
                >
                    <el-input
                            v-model="addEditform.description"
                            autocomplete="off"
                            placeholder="商品类型描述"
                    ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="enterAdd" v-if="actor==='add'">确定添加</el-button>
            <el-button type="primary" @click="enterEdit" v-if="actor==='edit'">确定编辑</el-button>
        </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "ProductType",
        data() {
            return {
                title: '',
                actor: '',
                searchForm: {
                    currentPage: 1, //当前页数
                    pageSize: 5,//每页的数量
                },
                flag: false,
                total: 0, //总options条数
                tableData: [
                    {
                      isvalid: "",
                      isedit: '0'
                    }
                ],
                //加载更新人（不能用undefined）报错；
                Options: [],

                formLabelWidth: "120px",

                dialogFormVisible: false,

                addEditform: {
                    name: '',
                    description: '',
                },
                rules: {
                    name: [{required: true, message: '商品类型不能为空', trigger: 'change'}],
                     stationName: [{required: true, message: '库不能为空', trigger: 'change'}],
                }
            }
        },
        created() {
            this.selectData();
            this.loadUpdateBy();
        },
        methods: {
            //刷新方法
            refresh() {
                //location.reload();
                this.searchForm = {};
                //this.searchForm.name = "";
                this.searchForm.currentPage = 1;
                this.searchForm.pageSize = 5;
                this.selectData();
            },

            //开关组件更新数据库状态 是否有效
            // changeIsvalid(data) {
            //     console.log("@@@@data", data)
            //     this.$http.post("/product/type/api/updateIsvalidByChangeId", data).then(resp => {
            //         if (resp.data.code === 200) {
            //             this.$message({
            //                 type: 'success',
            //                 message: '执行成功!'
            //             });
            //         }
            //     })
            // },
            //开关组件更新数据库状态 是否允许被修改
            changeIsedit(data) {
                this.$http.post("/product/type/change?commentId="+data.commentId+"&isedit="+data.isedit).then(resp => {
                  if (resp.data.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '执行成功!'
                        });
                    }
                })
            },

            //分页查询所有信息
            selectData() {
              console.log("分页查询",this.searchForm)
                this.$http.post("/product/type/select", this.searchForm).then(result => {
                    // console.log("@@@@@@2"+result)
                    this.tableData = result.data.data.records;
                    // 遍历数据，将 isedit 转换为字符串类型
                    this.tableData.forEach(row => {
                      row.isedit = String(row.isedit);
                    });
                    console.log("@@@@@@"+this.tableData[0].isvalid+"~~~~~~~~~~~~~~~~~~~")
                    this.total = result.data.data.total;
                })
            },
            //添加按钮的方法
            addProductType() {
                this.actor = "add";
                this.dialogFormVisible = true;
            },
            //确认添加方法
            enterAdd() {
                this.$refs.addEditform.validate((valid) => {
                    console.log(valid);
                    if (valid) {
                        this.actor = ''
                        // console.log(this.addEditform, "-----添加---------");
                        this.$http.post("/product/type/insertProductType", this.addEditform).then(resp => {
                            if (resp.data.code === 200) {
                                this.$message({
                                    type: 'success',
                                    message: '添加成功!'
                                });
                                this.selectData();
                            }
                        })
                        this.addEditform = {}
                        this.dialogFormVisible = false;
                    }
                });
            },
            //编辑按钮
            updataProductType(row) {
                // console.log(row);
                this.actor = "edit"
                this.dialogFormVisible = true;
                this.addEditform.commentId = row.commentId
                this.addEditform = row;
            },
            //确认编辑方法
            enterEdit() {
                this.$refs.addEditform.validate((valid) => {
                    console.log(valid);
                    if (valid) {
                        this.actor = "";
                        // console.log(this.addEditform, "-------------")
                        this.$http.post("product/type/updateProductType", this.addEditform).then(resp => {
                            if (resp.data.code === 200) {
                                this.$message({
                                    type: 'success',
                                    message: '更新成功!'
                                });
                                this.selectData();
                            }
                        })
                        this.addEditform = {}
                        this.dialogFormVisible = false;
                    }
                })
            },

            // //删除数据
            deleteproductType(commentId) {
                // console.log(commentId,"--------------------")
                this.$confirm('是否删除该数据？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.get("/product/type/deleteProductTypeById?commentId=" + commentId).then(resp => {
                        // console.log(resp)
                        if (resp.data.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.searchForm.currentPage = 1;
                            this.selectData();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            //获取所有的用户信息
            loadUpdateBy() {
                this.$http.get("/system/user/selectAll").then(result => {
                    this.Options = result.data.data;
                    // console.log(this.updateOptions)
                })
            },
            //从查到的用户信息中查询对应的创建者姓名
            createFormatter(row) {
                for (let i = 0; i < this.Options.length; i++) {
                    if (row.createBy === this.Options[i].userId) {
                        return this.Options[i].userName;
                    }
                }
            },
            //从查到的用户信息中查询对应的修改者姓名
            updateFormatter(row) {
                for (let i = 0; i < this.Options.length; i++) {
                    if (row.updateBy === this.Options[i].userId) {
                        return this.Options[i].userName;
                    }
                }
            },

            //搜索
            search() {
                this.selectData();
            },
            handleDelete() {

            },

            //跳转更新
            handleEdit(index, row) {
                console.log(index, row);
                this.dialogFormVisible = true; //让对话框显示
                this.title = "商品类型更新"; //让title的值改变
                this.addEditform = row; //给表单赋值
            },
            //跳转添加
            handleAdd() {
                this.dialogFormVisible = true; //让对话框显示
                this.title = "商品类型添加"; //让title的值改变
                this.addEditform = {}; //让addEditform表单清空
            },
            //显示索引
            indexMethod(index) {
                return index + 1;
            },

            //每页数量发生变化
            handleSizeChange(val) {
                this.searchForm.pageSize = val;
                this.selectData();
            },
            //页码发生变化
            handleCurrentChange(val) {
                this.searchForm.currentPage = val;
                this.selectData();
            },

        }
    }
</script>

<style scoped>

</style>
